Assignment 5: Mouse Arrow (for loops)

mouseArrow.png
vertSize,horizSize,gridSize = 5
big_arrow.png
all sizes = 20, mouse is clicked

tinyarrow.png
all sizes = 2

Introduction
"The demoscene is a computer art subculture that specializes in producing demos, which are non-interactive audio-visual presentations that run in real-time on a computer. The main goal of a demo is to show off programming, artistic, and musical skills." - "Demoscene - Wikipedia"

In the year 2000, a German group of programmers called Farbausch released a demo called fr-08 that was amazing. In just 64KB (the amount of space that would store about 3 seconds of a song, or a 1 page essay) they made a whole 3D world and soundtrack. You can still find the code online - although it may not run on modern computers.

How did they accomplish this amazing feat? Did they store all the music and graphics in their program? No! They generated them. That is, they told the computer how to make the graphics and sound with programming. Believe it or not, many modern games use this type of programming (called procedural generation). For example, Minecraft, Left4Dead, Sim City and many others. This type of programming is also used to generate the awesome battle scenes in movies like Lord of the Rings.

Your job is much simpler than all of that though. I want you to use a for loop to tell the computer how to make an arrow.

Assignment
Your assignment is to build off the code that I gave you in video 5 (5-mouseCursor.ogg) to generate a shape using a for loop.
I suggest an arrow, as pictured above. You may, however, do a different shape provided there are at least 3 statements in your for loop. (The below program has 1 statement in its for loop)
When you run your program, your shape should follow the mouse and change color if clicked.

You can view a demo on the transfer drive at X:\MSIT\demos\Assignment5\index.html

Requirements
  • Name, program title and description in comments: 2 pt
  • Helpful comments throughout: 1pt
  • Code is readable (good variable names, organized and easy to understand): 1pt
  • There are at least 3 statements in the for loop: 3pts
  • Color of generated shape changes if mouse is clicked: 1 pt
  • If vertSize, horizSize and gridSize are all changed to 5, your cursor scales properly (i.e. it looks the same, but smaller): 2 pts.

Given:
You may use (and modify) the code below:

int vertSize = 10;
int horizSize = 10;
int gridSize = 10;
 
void setup(){
  size(300,300);
}
 
void draw(){
 
  background(0);
  fill(255);
 
  for(int i = 0; i <=11; i++){
    rect(mouseX+gridSize*i,mouseY+gridSize*i,horizSize,vertSize);
  }
 
}